<!--摄像头列表——添加设备-->
<template>
  <el-drawer
    size="55%"
    :title="form&&form.id ? '修改空间' : '添加空间' "
    :visible="visible"
    @close="updateVisible(false)">
    <el-form
      class="table-btn-cls"
      ref="form"
      :rules="rules"
      :model="form"
      label-width="110px"
      @keyup.enter.native="submit"
      @submit.native.prevent
    >
      <div class="padding30">
        <!--<el-form-item label="排序值" prop="sortValues">
          &lt;!&ndash;限制int类型&ndash;&gt;
          <el-input
            v-model.number="form.sortValues"
            placeholder="请输入排序值"
            clearable
          />
        </el-form-item>-->
        <el-form-item label="设备名称" prop="displayName">
          <el-input
            v-model="form.displayName"
            placeholder="请输入设备名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="所属空间" prop="spaceId">
          <el-select
            v-model="form.spaceId"
            placeholder="请选择所属空间"
            class="ele-block"
            clearable
            @clear="see()"
          >
            <el-option v-for="(i,j) in spaceList" :key="j" :label="i.spaName" :value="i.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="设备国标ID" prop="subSerial">
          <el-input
            v-model="form.subSerial"
            placeholder="请输入设备国标ID"
            clearable
          />
        </el-form-item>
        <!--限制int类型-->
        <el-form-item label="设备用户名" prop="deviceSerial">
        <el-input
          v-model="form.deviceSerial"
          placeholder="请输入设备用户名"
          clearable
        />
      </el-form-item>

        <el-form-item label="设备密码" prop="validateCode">
          <el-input
            type="password"
            show-password
            v-model="form.validateCode"
            placeholder="请输入设备密码"
            clearable
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            :rows="6"
            maxLength="500"
            v-model="form.remark"
            placeholder="请输入备注"
            clearable
          />
        </el-form-item>
      </div>
      <div class="height130"></div>
    </el-form>
    <div class="flex-columns flxed-botton">
      <div class="color999 m-bottom20">温馨提示：一个空间最大不超过<span class="red">200个</span>设备</div>
      <el-button type="primary" class="colorBlue"  @click="confirm()" :loading="loading">保存</el-button>
    </div>
  </el-drawer>
</template>

<script>
  import {addSpace,getSpaceInfo} from "@/api/lncomingManagement/spaceList"
  import {deviceInformation} from "@/api/lncomingManagement/carmeraAgent";

  export default {
    name: "add-space",
    data(){
      // 默认表单数据
      const defaultWhere = {
        oemId:this.$store.state.user.info.oemId   //代理id
      };
      return{
        form:{...defaultWhere},
        rules: {
          sortValues: [
            {
              required: true,
              message: '请输入排序值',
              trigger: 'blur'
            }
          ],
          displayName: [
            {
              required: true,
              message: '请输入设备名称',
              trigger: 'blur'
            }
          ],
          spaceId: [
            {
              required: true,
              message: '请输入所属空间',
              trigger: 'blur'
            }
          ],
          accessGateway: [
            {
              required: true,
              message: '请输入网关IP',
              trigger: 'blur'
            }
          ],
          subSerial: [
            {
              required: true,
              message: '请输入设备国标ID',
              trigger: 'blur'
            }
          ],
          deviceSerial: [
            {
              required: true,
              message: '请输入设备用户名',
              trigger: 'blur'
            }
          ]
            ,
            validateCode: [
                {
                  required: true,
                  message: '请输入设备密码',
                  trigger: 'blur'
                }
              ]

        },
        loading:false,
        visible:false,
        spaceList:[] //空间列表
      }
    },
    methods:{
      show(spaceList,row){
        this.spaceList=spaceList
        this.visible=true
        // 编辑
        if(row){
          this.form=row
        }
       /* if(id){
          // 根据id查询空间_编辑空间回显
          getSpaceInfo({id:id})
            .then((data) => {
              this.form=data.data //将查询到的info赋值
            })
            .catch((e) => {
              this.$message.error(e.message);
            });
        }*/
      },
      //提交
      confirm(){
        console.log("this.form.....",this.form)
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          this.loading = true;
          deviceInformation(this.form)
            .then((msg) => {
              this.loading = false;
              let hint =this.form.id ? '修改设备成功' : '添加设备成功'
              this.$message.success(hint);
              this.updateVisible(false)
              this.$emit('reload')
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });

        });
      },
      /* 更新 visible */
      updateVisible(value) {
        this.visible=value
        if(value==false){
          this.form={...this.defaultWhere}
        }
      },
    }
  }
</script>

<style lang="less" scoped>
  /*设置表格下的form表单——el-form-item*/
  /deep/ .table-btn-cls .el-form-item{
    margin-bottom: 32px !important;
  }
  .height130{
    height: 130px;
  }
  .flxed-botton{
    background-color: #fff;
    height: 130px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding:20px 40px;
    button{
      width: 100px;
      margin: 10px 10px 0;
    }
  }
</style>

